/**
 * Copyright @ 2023 iAuto (Shanghai) Co., Ltd.
 * All Rights Reserved.
 *
 * Redistribution and use in source and binary forms, with or without
 * modification, are NOT permitted except as agreed by
 * iAuto (Shanghai) Co., Ltd.
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 */

import React, { useCallback, useEffect } from 'react';
import { useReactive } from 'ahooks';
import { Slider } from 'antd';
import { SliderSingleProps } from 'antd/lib/slider';
// 固定64个颜色
import colorList from './colors.json';

const ColorSlider: React.FC<SliderSingleProps> = (props) => {
  const { onChange, ...extraProps } = props;

  const colorSliderState = useReactive({
    color: colorList[0], // 默认第一个颜色
  });

  useEffect(() => {
    if (extraProps.value) {
      colorSliderState.color = colorList[extraProps.value];
    }
  }, [extraProps.value]);

  const handleOnChange = useCallback((value: number) => {
    onChange?.(value);
    setTimeout(() => {
      colorSliderState.color = colorList[value - 1] || colorList[0];
    });
  }, []);

  return (
    <div style={{ '--color-slider-color': colorSliderState.color }} className={'colorSlider'}>
      <Slider onChange={handleOnChange} {...extraProps} />
    </div>
  );
};

export default ColorSlider;
